<template>
	<view id="search-content">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search">
				<view class="search-ico">
					<image lazy-load="true"  src="../../static/images/search-ico.png" class="search-ico"></image>
				</view>
				<view class="search-input">
					<input type="text" confirm-type="search" class="search-input" placeholder="沙发"  v-model="inputVal" @confirm="search_good">
					</view>
				<!-- <view class="close-btn" @click="cleanInput()">
					<image lazy-load="true"  src="../../static/images/close-btn.png" class="close-btn"></image>
				</view> -->
			</view>
			<view class="search-text" @click="goHome">取消</view>
		</view>
		<!-- 抱歉,没有发现的相关内容 -->
		<view class="no-result" v-if="no_data">
			<view class="search-big-btn">
				<image lazy-load="true"  src="../../static/images/search-big-btn.png" class="search-big-btn"></image>
			</view>
			<view class="info">抱歉，没有发现的相关内容</view>
			<view class="change">换个关键词试试吧</view>
		</view>
		<!-- 搜索历史 -->
		<view class="search-history search-more" v-if="history_search.length>0">
			<view class="title">
				<view class="">搜索历史</view>
				<view class="clearAll" @click="clearAll">全部清除</view>
				</view>
			<view class="list">
				<view v-for="(item,index) in history_search" :key="index" @click="goGoodList(item)">{{item}}</view>
			</view>
		</view>
		<!-- 推荐搜索 -->
		<view class="search-recommend search-more" v-if="likeArr.length>0">
			<view class="title">大家都在看</view>
			<view class="list">
				<view v-for="(item,key) in likeArr" :key="key" @click="goGoodList(item)">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputVal:'',
				likeArr:[],
				no_data:false,
				history_search:[]
			}
		},
		onLoad() {
			var self = this;
			this.$request.request({
				url:'/search/hot_search',
				data:{
					type:'index'
				},
				success:function(res){
					if(res.code==200){
						var x = res.result;
						self.likeArr = x;
						console.log(self.likeArr)
					}else{
						
					}
				}
			});
		},
		onShow() {
			var self = this;
			self.history_search = uni.getStorageSync('history_search') ? uni.getStorageSync('history_search').reverse() : [];
		},
		methods: {
			cleanInput(){
				this.inputVal = ''
			},
			search_good(e){
				var self = this;
				let search_vcl = e.detail.value;
				let data={
					p:1,
					per:20,
					category_ids:'',
					store_ids:'',
					style_ids:'',
					low_price:'',
					high_price:'',
					name:search_vcl,
					sort:'sell_count DESC'
				}
				this.$request.request({
					url:'/search/goods_list',
					data:data,
					success:function(res){
						if(res.code==200){
							var x = res.result;
							if(x.length>0){
								self.no_data = false;
								if(self.history_search.indexOf(search_vcl) == -1 && search_vcl !==''){
									self.history_search.push(search_vcl);
									uni.setStorageSync('history_search',self.history_search);
									self.history_search = self.history_search.reverse();
									
								}
								uni.navigateTo({
								    url: '../good-list/good-list?search='+encodeURIComponent(e.detail.value)
								});
							}else{
								self.no_data = true
							}
						}else{
							
						}
					}
				});
			},
			goGoodList(val){
				var self = this;
				self.inputVal = val;
				let data={
					p:1,
					per:20,
					category_ids:'',
					store_ids:'',
					style_ids:'',
					low_price:'',
					high_price:'',
					name:val,
					sort:'sell_count DESC'
				}
				this.$request.request({
					url:'/search/goods_list',
					data:data,
					success:function(res){
						if(res.code==200){
							var x = res.result;
							if(x.length>0){
								self.no_data = false;
								if(self.history_search.indexOf(val) == -1 && val !==''){
									self.history_search.push(val);
									uni.setStorageSync('history_search',self.history_search);
									self.history_search = self.history_search.reverse();
									
								}
								uni.navigateTo({
								    url: '../good-list/good-list?search='+encodeURIComponent(val)
								});
							}else{
								self.no_data = true
							}
						}else{
							
						}
					}
				});
			},
			goHome(){
				uni.switchTab({
				    url: '/pages/index/index'
				});
			},
			clearAll(){
				this.history_search = [];
				uni.setStorageSync('history_search',[]);
			}
		}
	}
</script>

<style>
	@import url("search.css");
</style>
